<template>
  <view class="login-container">
    <!-- Hello Kitty装饰元素 -->
    <view class="kitty-ear left-ear"></view>
    <view class="kitty-ear right-ear"></view>
    
    <view class="login-header">
      <view class="kitty-face">
        <view class="kitty-eye left-eye"></view>
        <view class="kitty-eye right-eye"></view>
        <view class="kitty-mouth"></view>
      </view>
      <text class="login-title">Hello Kitty登录</text>
    </view>

    <view class="login-form">
      <u-form :model="form" ref="uForm">
        <view class="form-header">
          <view class="ribbon"></view>
        </view>
        <u-form-item label="账号" prop="username" borderBottom>
          <u-input 
            v-model="form.username" 
            placeholder="请输入手机号/用户名"
            clearable
            focusBorderColor="#FF69B4"
            prefix-icon="user"
          />
        </u-form-item>

        <u-form-item label="密码" prop="password" borderBottom>
          <u-input 
            v-model="form.password" 
            placeholder="请输入密码" 
            password 
            clearable
            focusBorderColor="#FF69B4"
            prefix-icon="lock"
          />
        </u-form-item>
      </u-form>

      <view class="login-actions">
        <u-button 
          type="primary" 
          shape="circle" 
          @click="handleLogin"
          :loading="loading"
          bgColor="#FF69B4"
          hoverBgColor="#FF1493"
          height="80rpx"
          font-size="32rpx"
        >立即登录</u-button>
      </view>

      <view class="login-footer">
        <text class="register-link" @click="handleRegister">没有账号？立即注册</text>
      </view>
    </view>
    
    <!-- 装饰元素 -->
    <view class="decoration bow-left"></view>
    <view class="decoration bow-right"></view>

    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { 
            required: true, 
            message: '请输入登录账号', 
            trigger: ['blur', 'change'] 
          }
        ],
        password: [
          { 
            required: true, 
            message: '请输入登录密码', 
            trigger: ['blur', 'change'] 
          },
          {
            min: 6,
            max: 20,
            message: '密码长度在6到20个字符',
            trigger: ['blur']
          }
        ],
        loading: false
      }
    }
  },
  methods: {
     handleLogin() {
        this.$refs.uForm.validate().then(valid => {
          if (valid) {
            this.loading = true
            setTimeout(() => {
              // 模拟用户信息（实际项目中从API获取）
              const userInfo = {
                avatar: 'https://example.com/kitty_avatar.jpg', // Hello Kitty头像
                nickname: 'Kitty小宝贝' // 登录后的用户名
              }
              
              // 存储用户信息到Vuex（需先配置Vuex）
              this.$store.commit('SET_USER_INFO', userInfo)
              this.$store.commit('SET_IS_LOGGED_IN', true) // 设置登录状态
              
              // 显示登录成功提示
              this.$refs.uToast.show({
                type: 'success',
                message: '登录成功',
                icon: true
              })
              
              // 跳转到个人中心页面（假设路径为/pages/my/index）
              uni.switchTab({
                url: '/pages/my/index'
              })
              
              this.loading = false
            }, 1500)
          }
        })
      },
      handleRegister() {
        uni.navigateTo({
          url: '/pages/register/index'
        })
      }
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules)
    },
  }
</script>

<style lang="scss" scoped>
/* Hello Kitty主题颜色 */
$kitty-pink: #FF69B4;
$kitty-light-pink: #FFB6C1;
$kitty-dark-pink: #FF1493;
$kitty-white: #FFFFFF;
$kitty-black: #333333;

.login-container {
  padding: 60rpx 40rpx;
  min-height: 100vh;
  background: linear-gradient(135deg, $kitty-light-pink 0%, $kitty-pink 100%);
  position: relative;
  overflow: hidden;
}

/* Hello Kitty头部装饰 */
.kitty-ear {
  position: absolute;
  top: 120rpx;
  width: 80rpx;
  height: 80rpx;
  background-color: $kitty-white;
  border-radius: 50%;
  border: 10rpx solid $kitty-black;
  z-index: 1;
  
  &.left-ear {
    left: 25%;
    transform: rotate(-30deg);
  }
  
  &.right-ear {
    right: 25%;
    transform: rotate(30deg);
  }
}

.kitty-face {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  background-color: $kitty-white;
  border-radius: 50%;
  margin: 0 auto 20rpx;
  border: 8rpx solid $kitty-black;
  box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.1);
  
  .kitty-eye {
    position: absolute;
    top: 50rpx;
    width: 24rpx;
    height: 36rpx;
    background-color: $kitty-black;
    border-radius: 50%;
    
    &.left-eye {
      left: 40rpx;
    }
    
    &.right-eye {
      right: 40rpx;
    }
  }
  
  .kitty-mouth {
    position: absolute;
    bottom: 40rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 40rpx;
    height: 20rpx;
    border-bottom: 8rpx solid $kitty-black;
    border-radius: 0 0 50% 50%;
  }
}

.login-header {
  margin-bottom: 60rpx;
  text-align: center;
  padding-top: 60rpx;
}

.login-title {
  font-size: 48rpx;
  font-weight: bold;
  color: $kitty-dark-pink;
  text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
  font-family: 'Comic Sans MS', cursive, sans-serif;
}

.login-form {
  background: rgba(255, 255, 255, 0.95);
  padding: 60rpx 40rpx;
  border-radius: 40rpx;
  box-shadow: 0 20rpx 40rpx rgba(255, 105, 180, 0.3);
  position: relative;
  z-index: 2;
  
  .form-header {
    position: relative;
    margin-bottom: 40rpx;
    
    .ribbon {
      position: absolute;
      top: -100rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 200rpx;
      height: 120rpx;
      background-color: $kitty-dark-pink;
      border-radius: 50% 50% 0 0 / 30% 30% 0 0;
      box-shadow: 0 5rpx 10rpx rgba(0,0,0,0.1);
      z-index: -1;
      
      &::before, &::after {
        content: '';
        position: absolute;
        bottom: -20rpx;
        width: 60rpx;
        height: 80rpx;
        background-color: $kitty-dark-pink;
        border-radius: 0 0 30rpx 30rpx;
      }
      
      &::before {
        left: -40rpx;
        transform: rotate(-30deg);
      }
      
      &::after {
        right: -40rpx;
        transform: rotate(30deg);
      }
    }
  }
}

.login-actions {
  margin: 80rpx 0 60rpx;
}

.register-link {
  color: $kitty-pink;
  font-size: 28rpx;
  text-align: center;
  display: block;
  padding: 20rpx 0;
  text-decoration: underline;
  text-decoration-color: rgba(255, 105, 180, 0.3);
  font-weight: bold;
}

/* 装饰元素 */
.decoration {
  position: absolute;
  width: 120rpx;
  height: 120rpx;
  background-color: $kitty-pink;
  border-radius: 50%;
  opacity: 0.7;
  z-index: 0;
  
  &.bow-left {
    bottom: 100rpx;
    left: -40rpx;
    box-shadow: 0 0 0 30rpx rgba(255, 182, 193, 0.5);
  }
  
  &.bow-right {
    top: 300rpx;
    right: -40rpx;
    box-shadow: 0 0 0 30rpx rgba(255, 182, 193, 0.5);
  }
}

/* 输入框样式调整 */
.u-input__content {
  padding: 15rpx 0 !important;
}

.u-form-item__label {
  color: $kitty-dark-pink !important;
  font-weight: bold !important;
}

.u-button {
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-weight: bold;
}
</style>    